<template>
	
	<div class="tab-box">
		<div class="nav-wrap">
			<div class="nav-head">
				<span>接口版本</span>
				<div>
					<button @click="openDialog(null)" title="新增"><el-icon><Plus /></el-icon></button>
				</div>
			</div>
			
			<div class="nav-box">
				
				<ul>
					<li v-for="item in tableData" :class="isActive === item.id? 'active': ''" @click="handleVersionRow(item)">
						<span>{{item.version}}</span>
						<div class="tools">
							<el-button
							  v-show="item.pid=='-1' "
							  type="primary"
							  link
							  size="small"
							  @click.stop="openDialog(item)"
							>
							   <i-ep-edit />
							</el-button>
							
							<el-button
							  type="primary"
							  link
							  size="small"
							  @click.stop="handleCopy(item)"
							>
							  <i-ep-DocumentCopy />
							</el-button>
							
							<el-button
							  type="primary"
							  link
							  size="small"
							   @click.stop="handleDelete(item)"
							  ><i-ep-delete />
							</el-button>
						</div>
					</li>
				</ul>
				<div v-show="_totalPage>1" class="page">
					<el-pagination small background layout="prev, pager, next" :page-size="_pageSize" :total="_total" @current-change="currentChange" />
				</div>
			</div>
			
			<el-dialog
				v-model="dialogVisible"
				:title="title"
				width="300"
				:close-on-click-modal="false"
			>
			
			<el-form
			  ref="formRef"
			  :model="formData"
			  :rules="formRules"
			  label-width="60px"
			>
				<el-form-item label="版本" prop="version">
				  <el-input-number placeholder="版本" v-model="formData.version" type="number" :min="0"  controls-position="right" style="width: 100%;" />
				</el-form-item>
				</el-form>
			
				<template #footer>
				  <span class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="submitForm">
					  确定
					</el-button>
				  </span>
				</template>
			</el-dialog>
		</div>
		
	</div>
</template>

<script lang="ts" setup>
	
	import {
		Plus
	} from '@element-plus/icons-vue'
	import { reactive, ref} from 'vue'
	import { pagesForAPI,saveForAPI,deleteForAPI,copyForAPI} from "@/api/itester";
	import type {FormRules } from 'element-plus'
	
	const loading = ref(false);
	const currentChange=(cur:number)=>{
		_cur.value= cur
		load();
	}
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(10);
	const tableData=ref([]);
	const load=()=>{
		loading.value=true;
		pagesForAPI({
			cur:_cur.value,
			limit:_pageSize.value
		})
		.then(({result}) => {
			const _data=result
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e:any) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const dialogVisible = ref(false)
	const title=ref("");
	const formRef=ref();
	const formData=ref({
		id:'',
		type:'version',
		version:0.0,
	});
	
	const formRules=reactive<FormRules>({
	  version: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const openDialog=(data:any)=>{
		if(data){
			title.value="编辑"
			formData.value.id=data.id;
			formData.value.version=data.version;
		}else{
			title.value="新增"
		}
		dialogVisible.value=true;
	}
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForAPI(formData.value)
				.then((res) => {
					handleVersionRow(res.result);
					ElMessage.success(res.message);
					closeDialog();
					load();
				})
				.catch((e:any) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const closeDialog=()=>{
		dialogVisible.value=false;
		resetForm();
	}
	
	function resetForm() {
	  formRef.value.resetFields();
	  formRef.value.clearValidate();
	  formData.value.id="";
	  formData.value.version=0.0;
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除此版本吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForAPI({
			  	id:row.id
			  })
			  .then(() => {
				load();
				isActive.value = '';
				emits('deleteVersionRow')
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	const handleCopy=(row :object)=>{
		ElMessageBox.confirm("确认复制此版本吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  copyForAPI({
			  	id:row.id
			  })
			  .then(() => {
				load();
				emits('copyVersionRow')
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("取消"));
	}
	
	
	const isActive=ref('');
	const emits = defineEmits(['handleVersionRow','deleteVersionRow','copyVersionRow'])
	const handleVersionRow = (row:any) => {
		if(isActive.value == row.id){
			
		}else{
			if (isActive.value !== row.id) {
				isActive.value = row.id;
			} else {
				isActive.value = '';
			}
			emits('handleVersionRow',row)
		}
	}
	onMounted(() => {
		load();
	});
</script>

<style scoped>
	
	.nav-box{
		display: flex;
		flex-direction: column;
		>ul{
			flex: 1;
			>li{
				list-style: none;
				display: flex;
				height: 40px;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #373c54;
				font-size: 13px;
				border-left:2px solid transparent;
				cursor: pointer;
				>span{
					padding-left: 5px;
				}
				>.tools{
					>button{
						margin: 0rem;
						color:#ccc;
					}
				}
			}
			>li:hover{
				border-left:2px solid #3fa3ff;
				background-color: rgba(63, 163, 255, 0.2) !important;
			}
			>li.active{
				border-left:2px solid #3fa3ff;
				background-color: rgba(63, 163, 255, 0.5490196078) !important;
			}
		}
		>.page{
			display: flex;
			align-items: center;
			justify-content: center;
			align-content: center;
			height: 35px;
		}
	}
	
</style>